<template>
	<view>
		<view class="agreement-main-box" v-if="show">
			<view class="agreement-box">
				<view class="title">关于客户个人信息收集、使用规则公告</view>
				<view class="content-box">
					<view class="content" v-for="item in content">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="ok">我知道了</view>
			</view>
		</view>
		<view class="main-box" v-if="!isVerify">
			<image mode="widthFix" class="bg-image" :src="baseImagePath + 'top-bg.jpg'"></image>
			<view id="form-box" class="main-form-box">
				<!-- <view class="show-roll-mobile-box">
					<clb-show-roll-mobile :boxStyle="{'background-color': '#ff8a83'}"
						:itemStyle="{'color': '#fff'}"></clb-show-roll-mobile>
				</view> -->
				<!-- <image class="point" mode="widthFix" :src="baseImagePath + 'point.gif'"></image> -->
				<view style="position: relative;">
					<!-- <input @input="inputMobile" v-model="formData.mobile" maxlength="11" type="number" class="input"
						placeholder="请输入手机号" placeholder-style="color:#c8c9cf" /> -->

					<button class="mobile-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<image class="submit-btn" mode="widthFix" :src="baseImagePath + 'submit-btn.png'">
						</image>
					</button>
					<view class="clauze">

						<checkbox-group class="uni-flex uni-row checkbox-group">
							<checkbox :checked="checks" color="#FFCC33" class="checkbox">
							</checkbox>
						</checkbox-group>
						<view>
							<text class="text" @click="agreementChange">
								我已阅读并同意
							</text>
							<text class="tip-color" @click='getperson'>《关于客户个人信息收集、使用规则公告》</text>
						</view>

					</view>

					<!-- <image class="fix-btn" mode="widthFix" :src="baseImagePath + 'fix-btn.gif'"></image> -->
				</view>


			</view>
			<view class="bottox">
				<p class="ps">具体活动规则以实际产品为准</p>
				<p class="ps">成都净蓝科技有限公司</p>
				<p class="ps">客服热线:400-8825010</p>

			</view>

			<!-- <image mode="widthFix" class="bg-image" :src="imagePath + 'bottom-bg.jpg'"></image> -->
		</view>
		<view v-else
			style="width: 100%; height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #fff; color: #000;font-size: 30rpx;">
			此功能暂未开放
		</view>
		<yi-zun-ad :cm_key="10238802" :cm_secret="'f5asrwcme9ua1me9'" ad_class="test_class" ref="myAdRef"
			:ad_style="{width: '100%'}"></yi-zun-ad>
	</view>
</template>

<script>
	import commonApi from "../../api/commonApi";
	import httpUtil from "@/utils/httpUtil";
	import phoneApi from "@/api/phoneApi";
	import userApi from "@/api/userApi.js"

	export default {
		data() {
			return {
				scrollTop: 0,
				show: false,
				content: [
					"用户协议",
					"尊敬的用户，欢迎使用由成都省心云链科技有限公司（下列简称为“省心云链”）提供的服务。在使用前请您阅读如下服务协议，使用本应用即表示您同意接受本协议，本协议产生法律效力，特别涉及免除或者限制省心云链责任的条款，请仔细阅读。如有任何问题，可向省心云链咨询。",
					"1. 服务条款的确认和接受",
					"通过访问或使用本应用，表示用户同意接受本协议的所有条件和条款。",
					"2. 服务条款的变更和修改",
					"省心云链有权在必要时修改服务条款，服务条款一旦发生变更，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以放弃获得的本应用信息服务。如果用户继续享用本应用的信息服务，则视为接受服务条款的变更。本应用保留随时修改或中断服务而不需要通知用户的权利。本应用行使修改或中断服务的权利，不需对用户或第三方负责。",
					"3. 用户行为",
					"3.1 用户账号、密码和安全",
					"您需注册登录账号方可使用我司产品功能。",
					"3.2 账号注册时的禁止行为",
					"（1）请勿以党和国家领导人或其他社会名人的真实姓名、字号、艺名、笔名注册；",
					"（2）冒充任何人或机构，或以虚伪不实的方式谎称或使人误认为与任何人或任何机构有关的名称；",
					"（3）请勿注册和其他网友之名相近、相仿的名字；",
					"（4）请勿注册不文明、不健康名字，或包含歧视、侮辱、猥亵类词语的名字；",
					"（5）请勿注册易产生歧义、引起他人误解的名字；",
					"3.3 用户在本应用上不得发布下列违法信息和照片：",
					"（1）反对宪法所确定的基本原则的；",
					"（2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；",
					"（3）损害国家荣誉和利益的；",
					"（4）煽动民族仇恨、民族歧视，破坏民族团结的；",
					"（5）破坏国家宗教政策，宣扬邪教和封建迷信的；",
					"（6）散布谣言，扰乱社会秩序，破坏社会稳定的；",
					"（7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；",
					"（8）侮辱或者诽谤他人，侵害他人合法权益的；",
					"（9）含有法律、行政法规禁止的其他内容的；",
					"（10）禁止骚扰、毁谤、威胁、仿冒网站其他用户；",
					"（11）严禁煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；",
					"（12）严禁发布可能会妨害第三方权益的文件或者信息，例如（包括但不限于）：病毒代码、黑客程序、软件破解注册信息。",
					"（13）禁止上传他人作品。其中包括你从互联网上下载、截图或收集的他人的作品；",
					"（14）禁止上传广告、横幅、标志等网络图片；",
					"4. 服务内容",
					"本服务的具体内容由省心云链根据实际情况提供，省心云链可以对其提供的服务予以变更，且省心云链提供的服务内容可能随时变更。",
					"",
					"隐私条款",
					"1.用户信息公开情况说明",
					"尊重用户个人隐私是省心云链的一项基本政策。所以，省心云链不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本应用中的非公开内容，除非有下列情况：",
					"（1）有关法律规定或省心云链合法服务程序规定；",
					"（2）在紧急情况下，为维护用户及公众的权益；",
					"（3）为维护省心云链的商标权、专利权及其他任何合法权益；",
					"（4）其他需要公开、编辑或透露个人信息的情况；",
					"在以下（包括但不限于）几种情况下，启奔科技有权使用用户的个人信息：",
					"（1）在进行促销或抽奖时，省心云链可能会与赞助商共享用户的个人信息，在这些情况下省心云链会在发送用户信息之前进行提示，并且用户可以通过不参与来终止传送过程；",
					"（2）省心云链可以将用户信息与第三方数据匹配；",
					"（3）省心云链会通过透露合计用户统计数据，向未来的合作伙伴、广告商及其他第三方以及为了其他合法目的而描述省心云链的服务；",
					"2.隐私权政策适用范围",
					"（1）用户在使用本应用服务器时留下的个人身份信息；",
					"（2）用户通过本应用服务器与其他用户或非用户之间传送的各种资讯；",
					"（3）本应用与商业伙伴共享的其他用户或非用户的各种信息；",
					"（4）省心云链软件十分注重保护用户的个人隐私，并制定了《隐私政策》，用户亦可以通过《隐私政策》，用户确认并同意使用省心云链软件提供的服务将被视为接受《隐私政策》。",
					"3.资讯公开与共享",
					"省心云链不会将用户的个人信息和资讯故意透露、出租或出售给任何第三方。但以下情况除外：",
					"（1）用户本人同意与第三方共享信息和资讯;",
					"（2）只有透露用户的个人信息和资讯，才能提供用户所要求的某种产品和服务;",
					"（3）应代表本应用提供产品或服务的主体的要求提供（除非我们另行通知，否则该等主体无权将相关用户个人信息和资讯用于提供产品和服务之外的其他用途）：根据法律法规或行政命令的要求提供;因外部审计需要而提供;用户违反了本应用服务条款或任何其他产品及服务的使用规定;经本站评估，用户的帐户存在风险，需要加以保护。",
					"4.非个人隐私信息",
					"为了改善省心云链软件的技术和服务，向用户提供更好的服务体验，省心云链或可会自行收集使用或向第三方提供用户的非个人隐私信息。",
					"5.如何联系我们",
					"您可以通过以下方式与我们联系，我们将在15天内回复您的请求：",
					"（1）如对本政策内容、个人信息有任何疑问、意见或建议，您可通过省心云链客服邮箱：【912716425@qq.com】与我们联系。",
					"（2）如发现个人信息可能被泄露，您可以联系我们的客服人员进行投诉举报；",
					"如果您对我们的回复不满意，特别是您认为我们的个人信息处理行为损害了您的合法权益，您还可以通过向被告住所地有管辖权的法院提起诉讼来寻求解决方案。",
				],
				baseImagePath: 'https://h5.sx2b2c.com/images/tequanka/llb/',
				checks: false,
				isShowAgreement: false,
				agreementType: 1,
				isVerify: false,
				formData: {
					mobile: '',
					param: '',
					submit: 0
				},
				isShowLoading: false,
				ad_position_id: '',
				media_id: '',
			};
		},

		onLoad(option) {
			this.initData(option)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			getPhoneNumber(e) {
				if (e.detail.code) {
					phoneApi.getWxMiniMobile(e.detail.code, res => {
						this.formData.mobile = res
						this.checks = true
						this.inputMobileHander(res)
					}, err => {
						// this.isShowInput = true
					})

				} else {
					console.log('getPhoneNumber')
					// this.isShowInput = true
				}
			},
			getperson() {
				this.show = true
			},
			ok() {
				this.show = false
			},
			initData(option) {
				// &media_id=422&ad_position_id=1341
				// option.media_id = 422
				// option.ad_position_id = 1341

				uni.clearStorageSync()
				if (option.a) {
					httpUtil.setA(option.a)
				}

				// if (option.mobile) {
				// 	formData.value.mobile = option.mobile
				// }
				this.formData.mobile = ''
				if (option.submit) {
					this.formData.submit = 1
				}

				userApi.getMiniLoginCode(code => {
					userApi.initUserId(code, res => {})
				})

				commonApi.isVerify(res => {
					this.isVerify = res
				})

				if (option.ad_position_id) {
					this.ad_position_id = option.ad_position_id
				}
				if (option.media_id) {
					this.media_id = option.media_id
				}
			},
			inputMobile() {

				if (this.formData.mobile.length >= 11) {
					this.checks = true
					this.inputMobileHander(this.formData.mobile)
				}
			},
			inputMobileHander(mobile) {
				console.log('inputMobileHander', mobile)
				let adEle = this.$refs.myAdRef;
				adEle.renderYiZunAd({
					ad_position_id: this.ad_position_id,
					media_id: this.media_id,
					phone: mobile,
					goods_name: "视频权益",
					auto: true,
					msg: "获取广告失败",
					clickFb: (data) => {
						console.log('inputMobileHander', data)
						//返回的data.ad_url为广告页面跳转地址，需要使用webview加载
						uni.navigateTo({
							url: '/pages/web/web?url=' + encodeURIComponent(data.ad_url)
						});
					}
				})
			}

		}

	}
</script>

<style lang="scss">
	.agreement-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 3;

		.agreement-box {
			border-radius: 20rpx;
			background-color: #faf7f2;
			padding: 30rpx;
			width: 85%;
			box-sizing: border-box;

			.title {
				text-align: center;
				color: #f94439;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}

			.content-box {
				max-height: 50vh;
				overflow: auto;

				.content {
					font-size: 25rpx;
					color: #515151;
					margin-top: 30rpx;
					line-height: 45rpx;
				}

			}

			.btn {
				width: 300rpx;
				font-size: 25rpx;
				letter-spacing: 2rpx;
				color: #fff;
				text-align: center;
				background-color: #f94338;
				border-radius: 120rpx;
				padding: 13rpx 0;
				font-size: 32rpx;
				margin: 10rpx auto 0;
			}
		}
	}

	.clauze {
		width: 100%;
		margin: 15rpx auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		align-items: center;

		.text {
			letter-spacing: 2rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.tip-color {
			color: #d44848;
			font-size: 28rpx;
		}
	}

	.bottox {
		text-align: center;
		font-size: 28rpx;
		color: #ffe7e5;
		font-weight: 300;
	}

	.ps {
		margin-top: 10rpx;
	}

	.main-box {
		background-color: #ff4338;
		padding-bottom: 100rpx;
	}

	.bg-image {
		display: block;
		width: 100%;
		height: auto;

	}

	.main-form-box {
		width: 80%;
		left: 10%;
		top: 101vw;
		margin: 0 auto;
		position: absolute;

		.show-roll-mobile-box {
			margin: 20rpx auto;
		}

		.point {
			width: 250rpx;
			height: auto;
			display: block;
		}

		.input {
			width: 100%;
			height: 80rpx;
			display: flex;
			border-radius: 50rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			padding-left: 30rpx;
			color: #000;
			font-size: 32rpx;
		}

		.fix-btn {
			width: 150rpx;
			height: auto;
			display: block;
			position: absolute;
			top: 28%;
			transform: translateY(-50%);
			right: -60rpx;
		}
	}

	::v-deep .form-box {
		.send-code {
			background-color: #ffcd88 !important;
			color: #946a3a !important;
		}

	}

	::v-deep .clauze {
		.text {
			color: #fff !important;
		}

		.tip-color {
			color: #fdd327 !important;
		}
	}

	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}


	.mobile-btn {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		animation: butChange 1s infinite;
		box-shadow: none;
		border-style: none;
		margin-top: 20rpx;

		&::after {
			border: none;
		}

		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}

		.submit-btn {

			width: 90%;
			height: auto;
			display: block;
			margin: 0 auto;
		}

	}
</style>